<template>
  <div class="box">
    <div class="card-container">
      <el-row :gutter="10">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
        <el-col :span="19" :offset="0">
          <el-form-item label="气象类型" prop="typeCode">
            <el-select v-model="queryParams.typeCode" clearable :style="'width:215px'" placeholder="请选择气象类型">
              <el-option v-for="item in typeList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="响应等级" prop="levelCode">
            <el-select v-model="queryParams.levelCode" clearable :style="'width:215px'" placeholder="请选择响应等级">
              <el-option v-for="item in levelList" :key="item.value" :label="item.text" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="0">
          <el-form-item>
            <el-button  icon="el-icon-search" size="mini" @click="handleQuery">搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    </div>
   
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button   icon="el-icon-plus" size="mini" v-hasPermi="['drillReport:add']"
          @click="handleAdd">新增演练</el-button>
        <el-button   icon="el-icon-delete" size="mini" v-hasPermi="['drillReport:remove']"
          :disabled="multiple" v-show="!multiple" @click="handleDelete">删除</el-button>
      </el-col>
    </el-row> -->
    <div class="card-container">
      <div class="body-title">
        <div class="body-title-left">
          气象演练
        </div>
        <div class="body-title-right">
        </div>
      </div>

      <el-table :data="tableData" height="500" style="width: 100%">
        <el-table-column prop="uuId" align="center" show-overflow-tooltip label="事件ID" width="240">
        </el-table-column>
        <!-- <el-table-column prop="msgType" align="center" show-overflow-tooltip label="信息类型">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_event_type" :value="scope.row.msgType" />
          </template>
        </el-table-column> -->

        <el-table-column align="center" label="演练气象事件信息" width="400">
          <template slot-scope="scope">
            <div class="eewMessage">
              <div>
                <div style="flex: 1;">事件:</div>
                <div style="flex: 3;">{{ scope.row.head || '--' }}</div>
              </div>
              <div>
                <div style="flex: 1;">经度:</div>
                <div style="flex: 3;">{{ scope.row.longitude || '--' }}°</div>
              </div>
              <div>
                <div style="flex: 1;">经度:</div>
                <div style="flex: 3;">{{ scope.row.latitude || '--' }}°</div>
              </div>
              <div>
                <div style="flex: 1;">地名:</div>
                <div style="flex: 3;">{{ scope.row.address || '--' }}</div>
              </div>
              <div>
                <div style="flex: 1;">预警时间:</div>
                <div style="flex: 3;">{{ scope.row.issueTime || '--' }}</div>
              </div>
              <div>
                <div style="flex: 1;">解除时间:</div>
                <div style="flex: 3;">{{ scope.row.relieveTime || '--' }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="信息接收对象" width="350" prop="drillProjectVOS">
          <template slot-scope="scope">
            <el-tree :data="scope.row.drillProjectVOS" style="height: 205px;overflow-y: auto;"
              :props="{ label: 'name' }"></el-tree>
          </template>
        </el-table-column>
        <el-table-column align="center" label="推送次数" prop="pushCount">
        </el-table-column>
        <!-- <el-table-column prop="updateBy" align="center" label="操作人">
        </el-table-column> -->
        <el-table-column align="center" min-width="150" label="操作">
          <template slot-scope="scope">
            <!-- <el-button type='text' v-hasPermi="['drillReport:query']" v-if="scope.row.pushCount > 0"
              @click="handleEdit(scope.row, '详情')">
              详情
            </el-button>
            <el-button type='text' v-hasPermi="['drillReport:edit']" v-else @click="handleEdit(scope.row, '编辑')">
              编辑
            </el-button> -->
            <!-- <el-button type='text' v-hasPermi="['drillReport:remove']" @click="handleDelete(scope.row)">
              删除
            </el-button> -->
            <el-button type='text' v-hasPermi="['drillReportPushTotalLog:query']" :disabled="scope.row.pushCount <= 0"
              @click="handleLog(scope.row)">
              记录</el-button>
            <!-- <el-button type='text' v-hasPermi="['drillReportPushTotalLog:add']" @click="handleEdit(scope.row, '推送')">推送
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <!-- 推送记录 -->
    <el-dialog :title="'推送记录'" :close-on-click-modal="false" v-if="updateLogOpen" :visible.sync="updateLogOpen"
      width="800px" append-to-body>
      <update-log :row="updateList" @handleCheck="handleCheck" />
    </el-dialog>
    <!-- 升级失败设备列表 -->
    <el-dialog :title="failTitle" :close-on-click-modal="false" v-if="updateFailOpen" :visible.sync="updateFailOpen"
      width="1000px" append-to-body>
      <update-fail :row="updateFailList" />
    </el-dialog>
  </div>
</template>

<script>
import {
  getfastWeather,
} from '@/api/weatherDrill/index.js';
import updateLog from './updateLog.vue';
import updateFail from './updateFail.vue';
export default {
  name: 'eewRehearsal',

  components: {
    updateLog,
    updateFail
  },
  data() {
    const _this = this;
    return {
      typeList: [
        { text: '台风', value: '01' },
        { text: '暴雨', value: '02' },
        { text: '暴雪', value: '03' },
        { text: '寒潮', value: '04' },
        { text: '大风', value: '05' },
        { text: '沙尘暴', value: '06' },
        { text: '高温', value: '07' },
        { text: '干旱', value: '08' },
        { text: '雷电', value: '09' },
        { text: '冰雹', value: '10' },
        { text: '霜冻', value: '11' },
        { text: '大雾', value: '12' },
        { text: '霾', value: '13' },
        { text: '道路结冰', value: '14' }
      ],
      levelList: [{ text: '蓝色预警', value: '01' },
      { text: '黄色预警', value: '02' },
      { text: '橙色预警', value: '03' },
      { text: '红色预警', value: '04' }],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        typeCode: null,
        levelCode: null
      },
      total: 0,
      tableData: [],
      updateList:[],
      updateLogOpen:false,
      failTitle:'',
      updateFailOpen:false,
      updateFailList:[]
    };
  },
  created() {
    // if (process.client){}
  },
  mounted() {
    this.getList();
  },
  computed: {

  },
  watch: {

  },
  beforeCreate() { },
  beforeMount() { },
  beforeDestroy() { },
  methods: {

    async getList() {
      const res = await getfastWeather(this.queryParams);
      if (res.code == 200) {
        this.tableData = res.rows;
        this.total = res.total;
      }
    },


    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.queryParams.level = [this.level, this.level1];
      this.getList();
    },
    resetQuery() {
      this.resetForm('queryForm');
      this.date = [];
      this.handleQuery();
    },
     handleLog(row){
      this.updateList = row;
      this.updateLogOpen = true;
    },
    handleCheck(row, sta) {
      this.updateFailList = row;
      if (sta == '0') {
        this.updateFailList.pushStatus = sta;
        this.failTitle = '速报演练推送失败设备列表';
      } else {
        this.updateFailList.pushStatus = '';
        this.failTitle = '速报演练推送设备列表';
      }
      this.updateFailOpen = true;
    },
  },
};
</script>
<style lang='scss' scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 20px;
}




.body-title {
  display: flex;
  position: relative;
  // justify-content: space-between;
  align-items: center;
}

.body-title-left {
  height: 100%;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #fff;
  line-height: 64px;
}

.body-title-right {
  position: absolute;
  right: 0;
}

.eewMessage {
  >div {
    display: flex;
    text-align: left;
  }
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 20px 0 20px;
  font-weight: 700;
  font-size: 16px;
}

.dialogBox {
  height: 648px;
  padding: 0 12px;
  overflow: hidden;
  overflow-y: auto;
}

::v-deep .el-tree-node__content:hover,
.el-upload-list__item:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #0095ff;
}

::v-deep .el-tree-node:focus>.el-tree-node__content {
  background: rgba(0, 149, 255, 0.1);
}
</style>